<template>
<div>
  <ul>
    <li v-for="item in randomDataArr" :key="item" :style="randomStyle(item)">
      <label>{{item}}</label>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  name: 'random-item',
  props: { randomData: { type: Object } },
  setup(props) {
    let randomDataArr = props.randomData;
    // 颜色对象
    const ramdomColor = () => {
      const r = Math.floor(Math.random() * 255);
      const g = Math.floor(Math.random() * 255);
      const b = Math.floor(Math.random() * 255);
      return 'rgba(' + r + ',' + g + ',' + b + ',0.8)';
    }

    const randomStyle = (number) => { 
      let style = ''; 
      let calNumber = calculateNumber(number);
      style += ('width: ' + calNumber + 'px; height: ' + calNumber + 'px; border-radius: ' + Math.floor(Math.random() * calNumber / 2) + 'px;'); 
      style += ('font-size: ' + calNumber / 2 + 'px;'); 
      style += 'display: inline-flex; margin: 10px;'; 
      style += 'justify-content: center; align-items: center; align-content: center;'; 
      style += 'background:' + ramdomColor(0.3) + ';'; 
      style += 'color:' + ramdomColor(0.9) + ';'; 
      return style; 
    };

    function calculateNumber(number) {
      // return 50 + Math.floor(Math.random() * 100); 
      return 100;
    }

    return { randomDataArr, randomStyle }
  }
}
</script>

<style>

</style>